<template>
  <div class="index-cont h-screen bg-no-repeat p-3">
    <div class="flex items-center">
      <!--      <van-icon name="ellipsis" style="font-weight: bold;"/>-->
      <i class="iconfont icon-daping_zhengzaijinhang font-bold"></i>
      <van-search class="search-box"
                  v-model="searchValue"
                  shape="round"
                  left-icon=""
                  right-icon="search"
                  background="transparent"
                  :clearable="false"
                  placeholder="请输入"
      />
    </div>
    <div>
      <div class="flex items-center justify-between pt-4">
        <div class="title-text font-bold text-center">
          为你推荐
        </div>
        <van-button plain round hairline type="primary" class="button-right" size="'small'" color="black">查看全部
        </van-button>
      </div>
      <div class="grid grid-cols-2 pt-5">
        <div class="recommend-box relative" @click="toRecommend('left')">
          <div class="recommend-box-bg absolute left-item" id="left"></div>
          <img src="@/assets/image/left-item.png" alt="">
          <div class="absolute text-center" style="bottom: 0;width: 100%">
            <div class="font-bold">假日海滩</div>
            <div class="text-xs">得勒·凡尔纳蒙</div>
          </div>
        </div>
        <div class="recommend-box relative">
          <div class="recommend-box-bg absolute right-item">
          </div>
          <img src="../assets/image/right-item.png" alt="" class="">
          <div class="absolute text-center" style="bottom: 0;width: 100%">
            <div class="font-bold">保护野生动物</div>
            <div class="text-xs" style="color: rgba(27, 27, 33, 1)">约翰·坎贝尔利</div>
          </div>
        </div>
      </div>
    </div>
    <div class="pt-4 tab-box flex items-center justify-between">
      <!--       style="min-width: 1000px;"-->
      <div class="flex flex-nowrap">
        <div class="title-text text-center p-2" v-for="(item,index) in bookCatList"
             :class="{'font-bold':chooseTabValue === index,'text-gray-400': chooseTabValue !== index}"
             @click="toActiveTab(index)">
          {{ item.bookCatName }}
        </div>
      </div>
      <van-button plain round hairline type="primary" class="button-right" size="'small'" color="black">查看全部
      </van-button>
    </div>
    <div class="tab-box">
      <div class="grid grid-cols-3 pt-2" style="height: 140px">
        <div v-for="(item,index) in recommendBookList">
          <img :src="item.book_cover_small" alt="" class="img-recommend">
        </div>
      </div>
    </div>
    <div class="flex items-center justify-between pt-4">
      <div class="title-text font-bold text-center">
        今日热门
      </div>
    </div>
    <div v-for="(item,index) in hotList" :key="index" class="pt-2">
      <colBookBox :info="item"></colBookBox>
    </div>
  </div>
</template>

<script lang="ts" setup>
import {onMounted, reactive, ref, toRefs, watch} from 'vue'
import GlobalConstant from '../config/global-constant'
import {indexApi} from "../api";
import httpClient from '../http'
import {ColBoxDetail} from "../modal/col-box-detail";
import png1 from '../assets/image/6.jpeg.png'
import png2 from '../assets/image/2.jpeg.png'
import png3 from '../assets/image/3.jpeg.png'
import png4 from '../assets/image/21.jpg'
import png5 from '../assets/image/22.jpg'
import png6 from '../assets/image/23.jpg'
import png7 from '../assets/image/31.jpg'
import png8 from '../assets/image/32.jpg'
import png9 from '../assets/image/33.jpg'

const searchValue = ref('')
const path = ref(GlobalConstant.minioPath)
const chooseTabValue = ref(0)
const reactiveData = reactive({
  bookCatList: [],
  recommendBookList: [],
  hotList: []
})
const {bookCatList, recommendBookList, hotList} = toRefs(reactiveData);

watch(() => chooseTabValue.value, (val, oval) => {
  reactiveData.recommendBookList = reactiveData.bookCatList[chooseTabValue.value].list.slice(0, 3)
})
const toRecommend = (id) => {
  console.log(document.getElementById(id));
}
const toActiveTab = (e) => {
  chooseTabValue.value = e;
}
// 首页推荐数据
const searchBookList = () => {
  httpClient.get(indexApi.queryBookRecommendList).then((res: any) => {
    const {data, message, code} = res
    if (code === 0) {
      // data[0].bookCatName = '为你推荐';
      reactiveData.bookCatList = data.slice(1)
      reactiveData.recommendBookList = reactiveData.bookCatList[chooseTabValue.value].list.slice(0, 3)
    }
  })
}
const searchMockBookList = () => {
  reactiveData.bookCatList = [
    {
      bookCatName: '精选名著', list: [
        {
          book_cover_small: png1
        },
        {
          book_cover_small: png2
        },
        {
          book_cover_small: png3
        }
      ]
    },
    {
      bookCatName: '经典名著', list: [
        {
          book_cover_small: png4
        },
        {
          book_cover_small: png5
        },
        {
          book_cover_small: png6
        }
      ]
    },
    {
      bookCatName: '畅销作品', list: [
        {
          book_cover_small: png7
        },
        {
          book_cover_small: png8
        },
        {
          book_cover_small: png9
        }
      ]
    },

  ]
  reactiveData.recommendBookList = reactiveData.bookCatList[chooseTabValue.value].list.slice(0, 3)
  reactiveData.hotList = [
    {
      id: 1,
      book_cover_small: png1,
      bookName: '假日海滩',
      popular: 3,
      remark: '此书是坎贝尔利的精神自传，由其与世界各领域精英人士的对话交织而成，颇具巧思。'
    },
    {
      id: 2,
      book_cover_small: png8,
      bookName: '救猫咪',
      popular: 4,
      remark: '《救猫咪:电影编剧宝典》以一种新手和支持者能够理解并付诸实践的方式，灵活地引用了影片公司主管们使用的各类“成功”片例(《特工佳丽》(Miss Congeniality)、《虎胆龙威》(Die Hnrd)、《律政俏佳人》(Legally Blonde)、《天兆》(Sign)等)，揭开电影的神秘面纱，正面地作出解释(类型、情节、结构、市场、选演员等)。《救猫咪——电影编剧宝典》就像揭示好莱坞每个影片公司执行官和制片人秘密语言的指南书。一旦你学会了像带有支票本的执行官和制片人那样思考问题，你离成功就近了一步。'
    },
    {
      id: 3,
      book_cover_small: png9,
      bookName: '马伯庸笑翻中国简史',
      popular: 2,
      remark: '这是一部最精短、更生动的中国通史。“文字鬼才”马伯庸上起战国秦汉，下至晚清民国，以寥寥数笔，勾勒出中国历史的线索；打破以政治大事为纬、以帝王更替为经的写史手法，用最新颖的主题“王朝的德性”重新串联历史；穿插以马式冷幽默的犀利评点，将枯燥单调的历史真实变得新鲜有趣'
    }
  ]
}
onMounted(() => {
  searchMockBookList()
})
</script>

<style scoped lang="scss">
.index-cont {
  background-image: url("../assets/image/bg-index.png");
  background-size: 100% 100%;
}

.search-box {
  width: 100%;

  .van-search-content {
    background-color: white !important;
  }
}

.title-text {
  line-height: 24px;
}

.button-right {
  width: 64px;
  height: 24px;
  font-size: 12px;
  color: #1B1B21;
}

.recommend-box {
  width: 146px;
  height: 180px;
  margin: 0 auto;

  img {
    width: 82px;
    height: 120px;
    bottom: 73px;
    left: 29px;
    position: absolute;
  }

  .recommend-box-bg {
    width: 146px;
    height: 102px;
    bottom: 50px;
    border-radius: 8px;
  }

  .left-item {
    background-color: rgba(252, 226, 184, 1);
  }

  .right-item {
    background-color: rgba(210, 194, 255, 1);
  }
}

.tab-box {
  overflow-x: auto;
}

::-webkit-scrollbar {
  display: none;
}

.img-recommend {
  width: 80px;
  height: 120px;
  margin: 0 auto;
  box-shadow: 0 6px 12px rgba(35, 41, 61, 0.32);
  border-radius: 4px;
}
</style>
